<template>
	<view class="container">
		<!-- 标题部分 -->
		<view class="title">
			<view class="info">
				<image class="tx" src="/static/logo.png" mode="widthFix"></image>
				<view>
					 <h4 style="color: white;">der</h4> 
					          <p style="color: white;">13254654465</p>
				</view>
			</view>
			<view class="set" @click="entermyinfo">
				<image src="/pages/my/image/设置.png" mode="widthFix"></image>
			</view>
		</view>

		<!-- 优惠券部分 -->
		<view class="youhuiquan" @click="goToCouponPage"> 
			<view class="you">优惠券</view>
			<view class="number">3张</view>
		</view>

		<!-- 我的订单部分 -->
		<view class="order-box">
			<view class="order-header">
				<view class="order-title">我的订单</view>
				<view class="all-orders" @click="goToMyOrderPage">全部订单></view>
			</view>
			<view class="order-buttons">
				<view class="button" @click="goToUnpaidOrderPage">
					<image src="/pages/my/image/待支付.png" mode="widthFix"></image>
					<text>待支付</text>
				</view>
				<view class="button" @click="goToPendingUseOrderPage">
					<image src="/pages/my/image/待使用.png" mode="widthFix"></image>
					<text>待使用</text>
				</view>
				<view class="button" @click="goToPendingEvaluationOrderPage">
					<image src="/pages/my/image/待评价.png" mode="widthFix"></image>
					<text>待评价</text>
				</view>
			</view>
		</view>

		
				<!-- 我的服务部分 -->
				<view class="service">
					<view class="service-title">我的服务</view>
					<view class="service-grid">
						<!-- 领券中心 -->
						<view class="service-item" @click="goToCouponCenterPage">
							<image class="service-icon" src="/pages/my/image/领券中心.png" mode="widthFix"></image>
							<text class="service-text">领券中心</text>
						</view>
						<!-- 邀请好友 -->
						<view class="service-item">
							<image class="service-icon" src="/pages/my/image/邀请好友.png" mode="widthFix"></image>
							<text class="service-text">邀请好友</text>
						</view>
						<!-- 我的车辆 -->
						<view class="service-item" @click="goToAddCarPage">
							<image class="service-icon" src="/pages/my/image/我的车辆.png" mode="widthFix"></image>
							<text class="service-text">我的车辆</text>
						</view>
						 <!-- 消费记录 -->
						        <view class="service-item" @click="goToConsumptionPage">
						          <image class="service-icon" src="/pages/my/image/消费记录.png" mode="widthFix"></image>
						          <text class="service-text">消费记录</text>
						        </view>
						        <!-- 我的维修 -->
						        <view class="service-item" @click="goToMaintenancePage">
						          <image class="service-icon" src="/pages/my/image/我的维修.png" mode="widthFix"></image>
						          <text class="service-text">我的维修</text>
						        </view>
						<!-- 意见反馈 -->
						<view class="service-item" @click="goToFeedbackPage">
							<image class="service-icon" src="/pages/my/image/意见反馈.png" mode="widthFix"></image>
							<text class="service-text">意见反馈</text>
						</view>
						<!-- 收货地址 -->
						<view class="service-item" @click="goToAddressPage">
							<image class="service-icon" src="/pages/my/image/小房子.png" mode="widthFix"></image>
							<text class="service-text">收货地址</text>
						</view>
					</view>
				</view>
				<!-- 退出登录按钮 -->
						<view class="logout-button" @click="handleLogout">
							<text>退出登录</text>
						</view>
	</view>
</template>

<script setup>
		// 处理退出登录
			const handleLogout = () => {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 执行退出登录逻辑
							uni.removeStorageSync('token'); // 清除登录状态
							uni.reLaunch({ url: '/pages/login/login' }); // 跳转到登录页
						}
					}
				});
			};
			
			// 跳转到地址页面
			const goToAddressPage = () => {
			  uni.navigateTo({
			    url: '/pages/my/adress/adress' // 替换为你的地址页面路径
			  });
			};
			//跳到意见反馈页面
			const goToFeedbackPage = () => {
			  uni.navigateTo({
			    url: '/pages/my/yijian/yijian' // 替换为你的地址页面路径
			  });
			};
			//跳转到我的车辆页面goToAddCarPage
			const goToAddCarPage = () => {
			  uni.navigateTo({
			    url: '/pages/my/mycar/mycar' // 替换为你的地址页面路径
			  });
			};
			
			// 跳转到消费记录页面
			const goToConsumptionPage = () => {
			  uni.navigateTo({
			    url: '/pages/my/consumption/consumption' // 替换为你的消费记录页面路径
			  });
			};
	
			// 跳转到我的维修页面
			const goToMaintenancePage = () => {
			  uni.navigateTo({
			    url: '/pages/my/maintenance/maintenance' // 替换为你的我的维修页面路径
			  });
			};
			// 跳转到我的维修页面
			const entermyinfo = () => {
			  uni.navigateTo({
			    url: '/pages/my/myinfo/myinfo' // 替换为你的我的维修页面路径
			  });
			};
			// 跳转到优惠券页面
				const goToCouponPage = () => {
				  uni.navigateTo({
				    url: '/pages/mine/myCoupon/myCoupon' // 替换为你的优惠券页面路径
				  });
				};
				// 跳转到我的订单页面
					const goToMyOrderPage = () => {
					  uni.navigateTo({
					    url: '/pages/mine/myOrder/myOrder' // 替换为你的订单页面路径
					  });
					};
					// 跳转到领券中心页面
						const goToCouponCenterPage = () => {
						  uni.navigateTo({
						    url: '/pages/mine/couponCenter/couponCenter' // 替换为你的领券中心页面路径
						  });
						};
// 跳转到待支付页面
	const goToUnpaidOrderPage = () => {
	  uni.navigateTo({
	    url: '/pages/mine/myOrder/unpaidOrder/unpaidOrder'
	  });
	};

	// 跳转到待使用页面
	const goToPendingUseOrderPage = () => {
	  uni.navigateTo({
	    url: '/pages/mine/myOrder/pendingUseOrder/pendingUseOrder'
	  });
	};

	// 跳转到待评价页面
	const goToPendingEvaluationOrderPage = () => {
	  uni.navigateTo({
	    url: '/pages/mine/myOrder/pengdingEvaluationOrder/pengdingEvaluationOrder'
	  });
	};
</script>

<style>
	/* 外层容器 */
	.container {
		position: relative; /* 设置为相对定位，作为子元素绝对定位的参考 */
	}

	/* 标题部分 */
	.title {
		background-color: #5290ff;
		display: flex;
		justify-content: space-between; /* 左右两侧对齐 */
		padding: 50rpx;
		height: 260rpx;
		position: relative; /* 设置为相对定位，确保 z-index 生效 */
		z-index: 1; /* 设置层级 */
	}

	/* 用户信息部分 */
	.info {
		height: 120rpx;
		display: flex;
		align-items: center; /* 垂直居中 */
	}

	/* 头像样式 */
	.tx {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	/* 设置图标样式 */
	.set {
		width: 50rpx;
		height: 50rpx;
	}

	/* 优惠券部分 */
	.youhuiquan {
		height: 150rpx;
		background-color: #ffffff;
		position: absolute; /* 绝对定位 */
		top: 200rpx; /* 覆盖 title 的一半 */
		left: 50rpx; /* 左边距 */
		right: 50rpx; /* 右边距 */
		z-index: 2; /* 设置层级高于 title */
		border-radius: 30rpx; /* 圆角 */
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
		display: flex; /* 使用 Flex 布局 */
		justify-content: space-between; /* 左右两侧对齐 */
		align-items: center; /* 垂直居中 */
		padding: 0 40rpx; /* 左右内边距 */
	}

	/* 优惠券文字样式 */
	.you {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	/* 数量文字样式 */
	.number {
		font-size: 28rpx;
		color: #666;
	}

	/* 我的订单部分 */
	.order-box {
		height: 180rpx; /* 缩小高度 */
		background-color: #fff;
		position: absolute;
		top: 363rpx; /* 调整位置 */
		left: 20rpx;
		right: 20rpx;
		z-index: 2;
		border-radius: 25rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		padding: 25rpx 30rpx; /* 缩小内边距 */
	}

	/* 我的订单标题和全部订单容器 */
	.order-header {
		display: flex;
		justify-content: space-between; /* 左右两侧对齐 */
		align-items: center; /* 垂直居中 */
		margin-bottom: 15rpx; /* 缩小间距 */
	}

	/* 我的订单标题 */
	.order-title {
		font-size: 28rpx; 
		font-weight: bold;
		color: #333;
	}

	/* 全部订单文字 */
	.all-orders {
		font-size: 24rpx; 
		color: #666;
	}

	/* 功能按钮容器 */
	.order-buttons {
		display: flex;
		justify-content: space-between; /* 三个按钮均匀分布 */
	}

	/* 单个按钮样式 */
	.button {
		display: flex;
		flex-direction: column; /* 垂直排列图标和文字 */
		align-items: center; /* 水平居中 */
	}

	/* 按钮图标样式 */
	.button image {
		width: 48rpx; 
		height: 48rpx; 
		margin-bottom: 8rpx; 
	}

	/* 按钮文字样式 */
	.button text {
		font-size: 22rpx; 
		color: #666;
	}
	
	
		/* 我的服务部分 */
		.service {
			position: absolute;
			top: 565rpx; /* 调整位置 */
			left: 20rpx;
			right: 20rpx;
			background-color: #fff;
			border-radius: 25rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			padding: 25rpx 30rpx;
		}
	
		/* 我的服务标题 */
		.service-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}
	
		/* 服务模块网格布局 */
		.service-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr); /* 每行 4 个模块 */
			gap: 20rpx; /* 模块之间的间距 */
		}
	
		/* 单个服务模块 */
		.service-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border: 1rpx solid #eee; /* 细线边框 */
			border-radius: 10rpx; /* 圆角 */
			padding: 20rpx;
			box-sizing: border-box;
		}
	
		/* 服务图标 */
		.service-icon {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 10rpx;
		}
	
		/* 服务文字 */
		.service-text {
			font-size: 24rpx;
			color: #666;
		}
		/* 退出登录按钮 */
			.logout-button {
				position: fixed;
				bottom: 40rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 80%;
				height: 80rpx;
				background-color: #ff4d4d;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 40rpx;
				font-size: 32rpx;
				box-shadow: 0 4rpx 12rpx rgba(255, 77, 77, 0.3);
			}
</style>